<template>
  <div class="lix-ade__container">
    <LixField
      componentId="name"
      title="收货人姓名"
      placeholder="请输入收货人姓名"
      @onBlur="onBlur"
      :value="name"
      />
    <LixField
      componentId="mobile"
      title="手机号码"
      placeholder="请输入联系电话"
      :value="mobile"
      @onBlur="onBlur"
      />
    <LixField
      componentId="area"
      :isSelected="true"
      title="所在区域"
      :value="area"
      placeholder=""
      :inputDisabled="true"
      @onChange="onChange"/>
    <LixField
      componentId="address"
      title="详细地址"
      placeholder=""
      :value="address"
      @onBlur="onBlur"
      />

    <div class="lix-ade__seperate"></div>
    <div class="lix-ade__switch">
      <LixField
        componentId="default"
        title="设为默认地址"
        :inputDisabled="true"
        @onChange="onChange"
        :isSwitched="true"
        switchColor="#ff6b00"
        :checked="isDefault"
        />
    </div>
    <div class="lix-ade__btn">
      <button @click="submit">保存地址</button>
    </div>
  </div>
</template>

<script>
import LixField from '../components/lix-field';
import Tip from '../utils/tips.js';
import { createAddressApi, updateAddressApi } from '../api';
export default {
  components: {
    LixField
  },
  props: {
  },
  data() {
    return {
      id: 0,
      name: '',
      mobile: '',
      areaArr: [],
      area: '',
      address: '',
      isDefault: false,
      areaCode: 0
    };
  },
  onLoad(options) {
    console.log(options);
    this.initialize(options);
  },
  methods: {
    initialize(options) {
      if (options.isedit !== '1') {
        Object.assign(this.$data, this.$options.data());
        return;
      }
      const item = wx.getStorageSync('UPDATE_ADDRESS');
      if (item) {
        console.log(item);
        this.id = item.id;
        this.name = item.name;
        this.mobile = item.tel;
        this.area = `${item.province}-${item.city}-${item.country}`;
        this.address = item.addressDetail;
        this.areaCode = item.areaCode;
        this.isDefault = item.isDefault;
        this.areaArr[0] = item.province;
        this.areaArr[1] = item.city;
        this.areaArr[2] = item.country;
        this.isDefault = item.isDefault;
      }
    },
    onChange(e) {
      console.log(e);
      const { value, componentId } = e;
      if (componentId === 'area') {
        const { label, cityCode } = e;
        this.areaCode = cityCode;
        this.areaArr = label.split('-');
        this.area = label;
        console.log('区域：', this.area, ' 地区代码：', this.areaCode);
      } else if (componentId === 'default') {
        this.isDefault = value;
      }
    },
    onBlur(e) {
      console.log('失去焦点');
      console.log(e);
      const { value, componentId } = e;
      if (componentId === 'name') {
        this.name = value;
        console.log('收货人：', value);
      } else if (componentId === 'mobile') {
        this.mobile = value;
        console.log('手机号码：', value);
      } else if (componentId === 'address') {
        this.address = value;
        console.log('地址：', value);
      }
    },
    submit() {
      console.log('准备提交数据');
      if (!this.validate()) {
        return;
      }
      let data = {
        'name': this.name,
        'tel': this.mobile,
        'province': this.areaArr[0],
        'city': this.areaArr[1],
        'county': this.areaArr[2],
        'address_detail': this.address,
        'area_code': this.areaCode,
        'is_default': this.isDefault
      };
      console.log(data);
      if (this.id) {
        updateAddressApi(this.id, data)
          .then(res => {
            console.log(res);
            Tip.success('添加地址成功')
              .then(() => {
                wx.navigateBack({});
              });
          })
          .catch(e => {
            console.log(e);
          });
        return;
      }
      createAddressApi(data)
        .then(res => {
          console.log(res);
          Tip.success('添加地址成功')
            .then(() => {
              wx.navigateBack({});
            });
        })
        .catch(e => {
          console.log(e);
        });
    },
    validate() {
      if (this.name.length < 1) {
        Tip.error('请输入姓名');
        return false;
      }
      if (this.mobile.length < 8) {
        Tip.error('请输入正确的电话号码');
        return false;
      }
      if (this.areaCode.length < 5 || this.areaArr.length < 2) {
        Tip.error('请选择正确的区域');
        return false;
      }
      if (this.address.length < 1) {
        Tip.error('请填写详细地址');
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/mixins/mixins.scss";
@import "../theme-chalk/common/var.scss";
@import "../theme-chalk/_main.scss";

page {
  background: #f5f5f5;
}
@include b(ade) {

  @include e(container) {
    background: #fff;
  }

  @include e(seperate) {
    background: #f5f5f5;
    height: 10px;
    width: 100%;
  }

  @include e(btn) {
    position: absolute;
    bottom: 20px;
    left: 12px;
    right: 12px;
    height: 48px;

    & button {
      background: #ff6b00;
      color: #fff;
      font-size: 15px;
      line-height: 48px;
      border-radius: 0;
    }
  }
}
</style>
